<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<link href="./css/mui.css" rel="stylesheet"/>
	<link href="./css/mui.min.css" rel="stylesheet"/>
	<link href="./css/mui-icons-extra.css" rel="stylesheet"/>
	<link href="./css/app.css" rel="stylesheet"/>
	<style type="text/css">
	</style>
</head>
<body>
	<!-- 头部HEADER -->
	<header class="app-header">
		<b>最新</b>
		&nbsp; &nbsp; 
		<span onclick="jumpToIndexHistory()">历史</span>
	</header>
	<!-- 头部HEADER -->
	
	<!-- 首页视频布局 -->
	<div class="app-video-bg" id="refresh">
<!-- 		<div class="app-video">
			<video poster="" src="http://q5s8sdnd2.bkt.clouddn.com/%E4%BC%A0%E8%AF%B4%E4%B8%AD%E7%9A%84%E6%B5%B7%E5%B8%82%E8%9C%83%E6%A5%BC%E5%8F%AF%E4%BB%A5%E5%9C%A8%E8%BA%AB%E8%BE%B9%EF%BC%8C%E4%BD%A0%E8%A6%81%E4%BD%A0%E6%84%BF%E6%84%8F%EF%BC%81.mp4" type="video/mp4" name="media" controls="1" controlsList="nodownload" preload="auto" id="video-1" class="app-video-tag"></video>
			<div class="app-video-title">视频标题</div>
			<div class="app-video-menu">
				<span class="mui-icon-extra mui-icon-extra-heart-filled app-video-grey"></span>
				<div class="app-video-grey">0</div>
				<div style="height: 8px;"></div>
				<span class="mui-icon mui-icon-chat app-video-grey"></span>
			</div>
		</div> -->
	</div>
	<!-- 更多按钮 -->
	<p id="more">
		<!-- <button type="button" class="mui-btn mui-btn-block" style="background: ;" onclick="getIndex()">点击更多</button> -->
	</p>
	<br><br>
	<!-- 首页视频布局 -->
	
	<!-- 底部菜单 -->
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" onclick="jumpToIndex()">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" onclick="jumpToMarket()">
			<span class="mui-icon mui-icon-download"></span>
			<span class="mui-tab-label">库</span>
		</a>
		<a class="mui-tab-item" onclick="jumpToChat()">
			<span class="mui-icon mui-icon-chatbubble"></span>
			<span class="mui-tab-label">消息</span>
		</a>
		<a class="mui-tab-item" onclick="jumpToMy()">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
	<!-- 底部菜单 -->
</body>
</html>


<script src="./js/mui.js"></script>
<script src="./js/app.js"></script>
<script type="text/javascript">
	var pageSize = 2; //每页显示记录数
	mui.init({
		//下拉、上拉刷新
        pullRefresh: {
            container: "#refresh",
            down: { //下拉刷新
				style: "circle",
				height: 200,
				auto: true,
                contentrefresh: "视频正在加载...",
                contentnomore: '没有更多视频了',
                callback: async function () { 
					// mui.toast('刷新视频加载中...',{ 
					// 	duration:'short', type:'div',
					// });
					setSys(); //参数更新
					getIndex();
					mui('#refresh').pullRefresh().endPulldownToRefresh(); 
                }
            },
            up: { //上拉加载
                height: 500, 
                auto: false, 
                contentrefresh: "更多视频正在加载...", 
                contentnomore: '没有更多数据了', 
                callback: async function () { 
					// mui.toast('更多视频加载中...',{ 
					// 	duration:'short', type:'div',
					// });
					// setSys(); //参数更新
					getIndex();
                }
            }
        }
    });
	//自动加载
	(function($, owner) {
		setSys(); //参数更新
		getIndex(); 
	}(mui, window.app = {}));
	//获取列表
	function getIndex(){
		// mui.toast('更多视频加载中...',{ 
		// 	duration:'short', type:'div',
		// });
		var w = document.documentElement.clientWidth; //屏幕宽度
		var h = document.documentElement.clientHeight; //屏幕高度
		var sys = getSys();
		// var cache = cacheGet(indexList);
		// mui.toast('缓存：'+cache); 
		// return
		if (sys.day==0) {
			mui.toast('域名错误',{ 
				duration:'long', type:'div',
			});
			return
		}
		var resList = getIndexCache(); //数据缓存
		var list = resList.list;
		var idstr = resList.idstr;
		var startp = resList.page.pageStart;
		var sizep = resList.page.pageSize;
		var totalp = resList.page.pageTotal;
		var startCurr = startp + 1;
		// mui.toast('??'+startCurr)
		mui.ajax(sys.domain+'/app/video/index',{
			data:{
				appAccess: sys.appAccess,
				page: startCurr,
				size: sizep,
				idstr:idstr
			},
			dataType:'json',//服务器返回json格式数据
			type:'post',//HTTP请求类型
			timeout:10000,//超时时间设置为10秒；
			// headers:{'Content-Type':'application/json'},
			headers:{'Content-Type':'application/x-www-form-urlencoded'}, 
			success:function(res){
				// mui.toast('返回'+list.length); return 
				var h = '', p = '';
				if (res.code!=0) {
					// p = '<button type="button" class="mui-btn mui-btn-block noDataBtn">没有视频了</button>';
					// mui("#more")[0].innerHTML = p;
					// setTimeout(function(){
					// 	mui.toast('没有视频了！',{ 
					// 		duration:'short', type:'div',
					// 	});
					// }, 2000);
					// return
					jumpToIndexHistory();
				}
				var vs = res.data;
				for (var i=0;i<vs.length;i++) {
					var vheight = Math.round(w * vs[i].videoRatio);
					var vname = getStrLimitNum(vs[i].videoName,20); //显示有限字数
					h += '<div class="app-video" style="height:'+vheight+'px;">';
					h += '<video poster="" src="'+vs[i].videoLink+'" type="video/mp4" name="media" height="'+vheight+'" controls controlsList="nodownload" preload="auto" id="video-'+vs[i].videoId+'" class="app-video-tag" onclick="setVideo('+vs[i].videoId+')"></video>';
					h += '<input type="hidden" id="v-play-'+vs[i].videoId+'" value="0"/>';
					h += '<div class="app-video-title">'+vname+'</div>';
					h += '<div class="app-video-menu">';
					h += '<span class="mui-icon-extra mui-icon-extra-heart-filled app-video-grey"></span>';
					h += '<div class="app-video-grey">0</div>';
					h += '<div style="height: 8px;"></div>';
					h += '<span class="mui-icon mui-icon-chat app-video-grey"></span>';
					h += '</div>';
					h += '</div>';
				}
				p = '<button type="button" class="mui-btn mui-btn-block" id="noDataBtn" onclick="getIndex()">点击更多</button>';
				mui("#refresh")[0].innerHTML = h;
				mui("#more")[0].innerHTML = p;
				// mui.toast(startCurr)
				setIndexCache(vs, startCurr); //更新缓存
			},
			error:function(xhr,type,errorThrown){
				// console.log('网络错误');
				mui.toast('网络错误！',{ 
					duration:'short', type:'div',
				});
			}
		});
	}
	//获取数据缓存
	function getIndexCache(){
		var resList = cacheGet(indexList);
		if (!resList) {
			var list = new Array(),  //数据数组
				idstring = '', //ID字符串集合
				page = { //分页参数
					// 当前页码，初始化为0
					pageStart: 0,
					// 每页记录数
					pageSize: 1,
					// 当前记录数
					pageTotal: 0
				};
			return {
				// 数据数组
				list: list,
				// 历史ID集合
				idstr: idstring,
				// 分页
				page: page
			};
		}
		return resList;
	}
	/** 
	 * 设置数据缓存
	 * index 新数据
	 * start 当前页面
	 * */
	function setIndexCache(index, start){
		var resList = getIndexCache();
		var list = resList.list,  //数据数组
			idstring = resList.idstr, //历史ID字符串集合
			pageStart = resList.page.pageStart, //当前页码
			pageTotal = resList.page.pageTotal; //记录总数
		// mui.toast('ID：'+idstring)
		if (index.length > 0) {
			var idStrNew = '';
			for (var i=0;i<index.length;i++) {
				list[list.length] = index[i];
				idStrNew = index[i].videoId;
			}
			if (idstring.length==0) {
				idstring = idStrNew;
			} else {
				idstring = idstring+','+idStrNew;
			}
			pageStart = pageStart + start;
			pageTotal = pageTotal + index.length;
		}
		var page = {
			// 当前页码
			pageStart: pageStart,
			// 每页记录数
			pageSize: pageSize,
			// 当前记录数
			pageTotal: pageTotal
		};
		var indexNew = {
			// 数据拼接字符串
			list: list,
			// 历史ID字符串集合
			idstr: idstring,
			// 分页
			page: page
		};
		cacheSet(indexList, indexNew);
		return true;
	}
</script>